import React, { Component } from 'react'
import {
    Table, Input, message, Button
} from "antd"

import { findAllClass, deleteClassById, updateClassById, insertClass } from "@/services/class"


class Index extends Component {

    constructor(props) {
        super(props)
        this.requesData = this.requesData.bind(this)
        this.state = {
            isAddNew: false,
            classList: [],
            editingKey: null,
            editing: {
                class_id: null
            },
            col: [
                {
                    dataIndex: 'index',
                    title: "序号",
                    width: "100px",
                    render: (_, __, index) => {
                        return index + 1
                    }
                },
                {
                    dataIndex: "class_id",
                    title: '班级',
                    render: (text, record) => {
                        if (this.state.editingKey === record.key) {
                            return <Input defaultValue={record.class_id} onChange={(e) => {
                                this.setState({
                                    editing: {
                                        class_id: e.target.value.trim()
                                    }
                                })
                            }} />
                        }
                        return text
                    }
                },
                {
                    title: '操作',
                    dataIndex: 'operation',
                    width: "150px",
                    render: (_, record) => {
                        if (this.state.editingKey !== null) {
                            if (this.state.editingKey === record.key) {
                                return <>
                                    <Button type='link' style={{
                                        border: "0px",
                                        padding: "8px",
                                        margin: 0
                                    }} onClick={async () => {
                                        if (this.state.isAddNew) {
                                            if (this.state.editing.class_id) {
                                                const result = await insertClass({
                                                    class_id: this.state.editing.class_id
                                                })
                                                if (result.status === 0) {
                                                    message.success("添加成功")
                                                    this.requesData()
                                                    this.setState({
                                                        editingKey: null,
                                                        isAddNew: false
                                                    })
                                                } else {
                                                    message.error("添加失败")
                                                }
                                            } else {
                                                message.warn("未填写完整")
                                            }
                                        } else {
                                            if (this.state.editing.class_id) {
                                                const result = await updateClassById({
                                                    class_id: record.class_id,
                                                    next_class_id: this.state.editing.class_id
                                                })
                                                if (result.status === 0) {
                                                    message.success("修改成功")
                                                    this.requesData()
                                                    this.setState({
                                                        editingKey: null
                                                    })
                                                } else {
                                                    message.error("修改失败")
                                                }
                                            } else {
                                                message.warn("未填写完整")
                                            }
                                        }
                                    }}> 保存 </Button>
                                    <Button type='link' style={{
                                        border: "0px",
                                        padding: "8px",
                                        margin: 0
                                    }} onClick={() => {
                                        if (this.state.isAddNew) {
                                            const nextClassList = JSON.parse(JSON.stringify({ data: this.state.classList })).data
                                            nextClassList.shift();
                                            this.setState({
                                                isAddNew: false,
                                                editingKey: null,
                                                classList: nextClassList
                                            })
                                        } else {
                                            this.setState({
                                                editingKey: null
                                            })
                                        }
                                    }}> 取消 </Button>
                                </>
                            } else {
                                return <>
                                    <Button disabled={true} type='link' style={{
                                        border: "0px",
                                        padding: "8px",
                                        margin: 0
                                    }}> 编辑 </Button>
                                    <Button type='link' style={{
                                        border: "0px",
                                        padding: "8px",
                                        margin: 0
                                    }} disabled={true}> 删除 </Button>
                                </>
                            }
                        } else {
                            return <>
                                <Button type='link' style={{
                                    border: "0px",
                                    padding: "8px",
                                    margin: 0
                                }} onClick={() => {
                                    this.setState({
                                        editingKey: record.key,
                                        editing: {
                                            class_id: record.class_id
                                        }
                                    })
                                }}> 编辑 </Button>
                                <Button type='link' style={{
                                    border: "0px",
                                    padding: "8px",
                                    margin: 0
                                }}
                                    onClick={async () => {
                                        const result = await deleteClassById({ class_id: record.class_id });
                                        if (result.status === 0) {
                                            message.success("删除成功")
                                            this.requesData()
                                        } else {
                                            message.error(result.message)
                                        }
                                    }}> 删除 </Button>
                            </>
                        }
                    },
                },
            ]
        }
    }

    async requesData() {
        const result = await findAllClass();
        if (result.status === 0) {
            this.setState({
                classList: result.data
            })
        } else {
            message.error("加载失败")
        }
    }

    async componentDidMount() {
        this.requesData()
    }

    render() {
        return <>
            <div style={{
                width: "100%",
                backgroundColor: '#fff',
                padding: "8px",
                margin: "8px 0",
                display: "flex",
                justifyContent: 'flex-end'
            }}>
                <Button type="primary" disabled={this.state.editingKey} onClick={async () => {
                    this.setState({
                        classList: [
                            {
                                class_id: ""
                            },
                            ...this.state.classList
                        ],
                        editingKey: "",
                        editing: {
                            class_id: ""
                        },
                        isAddNew: true
                    })
                }}> 添加班级 </Button>
            </div>
            <Table
                columns={this.state.col}
                dataSource={this.state.classList.map((data) => {
                    return {
                        ...data,
                        key: data.class_id
                    }
                })}
            />
        </>
    }
}

export default Index
